<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="css/login.css">

    <!-- 引入组件库 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <div class="login-container">
        <div class="loginBox">
            <form method="post" class="login-form" id="form-id" action="/login.do" label-position="left">
                <div class="title-container">
                    <div class="logoInfo clearfix">
                        <em class="logo"></em>
                    </div>
                </div>
                <div>
                        <span class="svg-container svg-container_login">
                          <span class="user"></span>
                        </span>
                    <input id="username" type="text" name="username" placeholder="请输入用户名"/>
                    <input id="passwordcheck" type="checkbox" checked="checked" checked>记住密码
                </div>
                <div>
                        <span class="svg-container">
                          <span class="username"></span>
                        </span>
                    <input id="password" type="password" name="password" placeholder="请输入密码"/>
                    <input id="self-motion" type="checkbox" onclick="f1()">自动登录
                </div>
                <input id="button-login" type="submit" style="width:100%;margin-bottom:30px;" onclick="f()"
                       value="登录"></input>
            </form>
        </div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script>

    $(function () {
        var checkbox = localStorage.getItem("checkbox");
        var username = localStorage.getItem("username");
        var password = localStorage.getItem("password");
        var usernamecheck = localStorage.getItem("usernamecheck");
        var exit = localStorage.getItem("exit");
        if (checkbox == "yes") {  //判断上一次登录记住密码是否被选中
            //上一次登录选中了记住密码
            //将账号密码自动填充到表单中,并将记住密码的复选框状态改为被选中
            $("#passwordcheck").css("checked", "checked");
            $("#username").val(username);
            $("#password").val(password);
            if (usernamecheck == "yes") {
                //上一次登录,选择了自动登录
                //自动登录
                if(exit!="yes"){
                    //是从后台点击退出,来的页面;
                    $("#form-id").submit();
                }else {
                    localStorage.removeItem("exit");
                }

            }
        } else {
            //上一次登录没有保存用户名
            //并将记住密码的复选框状态改为被未被选中
            $("#passwordcheck").removeAttr("checked");
        }


    });


    function f1() {
        // 判断自动登录是否被点击要变成选中状态
        if (document.getElementById("self-motion").checked) {
            //改变记住密码的状态(自动登录前提必须记住密码)
            $("#passwordcheck").css("checked", "checked");
            console.log(1)
        } else {
            console.log(2)
        }
    }


    function f() {

        if (document.getElementById("passwordcheck").checked) { //判断记住密码复选框是否被选中
            //记住密码框已选(获取表单中的账号密码)
            var username = $("#username").val();
            var password = $("#password").val();

            var user = {  //打包表单中的账号密码
                username: username,
                password: password
            };
            //将账号密码发送后端判断该用户密码是否正确
            axios.post("/user/Ackpassword.do", user).then((res) => {
                if (res.data.flag) {
                    //账号密码正确
                    //存入本地
                    localStorage.setItem("username", username);
                    localStorage.setItem("password", password);
                    localStorage.setItem("checkbox", "yes");
                    //判断这一次自动登录是否被选中
                    if (document.getElementById("self-motion").checked){
                        //自动登录被选中
                        localStorage.setItem("usernamecheck", "yes");
                    }else {
                        localStorage.removeItem("usernamecheck");
                    }
                } else {
                    //账号密码错误
                    this.$message.error("密码错误");
                }

            })

        } else {
            //记住密码框未选
            // console.log(2);
            // 清空localStorage中的数据
            localStorage.removeItem("username");
            localStorage.removeItem("password");
            localStorage.removeItem("checkbox");
        }
    }


</script>

</html>
